<template>
    <div class="address">
        <div class="list">
           <template v-if="addressList.length">
                <div class="item" v-for="item in addressList" :key="item.addrId">
                <div class="top">
                    <div class="left">
                        <div class="rm">
                            <span>{{ item.receiver }}</span>
                            <span>{{ item.mobile }}</span>
                        </div>
                        <div class="addr">
                            {{ item.province }}{{ item.city }}{{ item.area
                            }}{{ item.addr }}
                        </div>
                    </div>
                    <div class="right">
                        <img
                            @click="headleEditAddrID(item)"
                            src="@/static/images/icon/revise.png"
                            alt=""
                        />
                    </div>
                </div>
                <div class="bottom">
                    <van-checkbox
                        :value="item.commonAddr === 1"
                        checked-color="red"
                        @change="onChange(item)"
                    />
                    设置默认地址
                </div>
            </div>
           </template>
        </div>
        <van-tabbar inactive-color="red">
            <van-tabbar-item @click="headleEdit">
                新增收货地址
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { putChange } from '@/services';
export default {
    computed: {
        ...mapState({
            addressList: (state) => state.address.addressList,
        }),
    },
    mounted() {
        const arealist = setTimeout(async () => {
            if (wx.getStorageSync('access_token')) {
                this.getList();
                clearTimeout(arealist);
            }
        }, 4);
    },
    methods: {
        ...mapActions({
            getList: 'address/getList',
        }),
        headleEdit() {
            wx.navigateTo({
                url: '/pages/user/address/add',
            });
        },
        headleEditAddrID(info) {
            wx.setStorageSync('city',JSON.stringify(info))
            wx.navigateTo({
                url: '/pages/user/address/add?addrId=' + info.addrId,
            });
        },
        onChange(info) {
            this.addressList.forEach((item) => {
                if (item.addrId === info.addrId) {
                    item.commonAddr = 1;
                } else {
                    item.commonAddr = 0;
                }
            });
            putChange(info.addrId);
        },
    },
};
</script>

<style lang="scss" scoped>
.address {
    height: 100%;
    background: #eee;
}
.address .van-tabbar-item__text {
    width: 100%;
}

.address .van-tabbar-item .van-tabbar-item__text {
    color: red;
}
.address .list {
    background: #eee;
    margin-top: 10px;
    margin-bottom: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
    .item {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 26px;
        background: #fff;
    }
    .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1px solid #ccc;
    }
    .bottom {
        display: flex;
        border-top: 1px solid #ccc;
        padding: 10px 20px;
    }
    .left {
        padding: 0 20px;
        .rm {
            line-height: 80px;
            span {
                margin-left: 10px;
                margin-right: 30px;
            }
        }
        .addr {
            margin-bottom: 20px;
            font-weight: 200;
        }
    }
    .right {
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 40px;
            height: 40px;
        }
    }
}
</style>
